<template>
  <div>
    <div>
      <Headers></Headers>
    </div>
  
    <div class="m-box">
      <!-- 良品、商店 -->
      <div class="ll">
        <router-link :to="'/pin'" class="ll-box">
          <img src='../assets/a.png' />
          <h4>良品购</h4>
        </router-link>
        <router-link :to="'/shangdian'" class="ll-box">
          <img src='../assets/b.png' />
          <h4>商店</h4>
        </router-link>
      </div>
      <!-- 美食家居影音-->
      <router-link :to="'/pin'" class="jiaju">
      <div class="mb-box">
        <div class="mb">
          <div class="my" v-for="mm in mjy">
            <span></span>
            {{mm.name}}
          </div>
        </div>
        <!-- 壁纸头像表情 -->
        <div class="mb">
          <div class="my" v-for='bb in btb'>
            <span></span>
            {{bb.name}}
          </div>
        </div>
      </div>
      <!-- 时尚美发美容 -->
      <div class="wh">
        <div class="sm">
          <div class="my" v-for="ss in smf">
            <span></span>
            {{ss.name}}
          </div>
        </div>
        <!-- 文字手工插画 -->
        <div class="sm">
          <div class="my" v-for='ww in wsc'>
            <span style="background-color:#85929f"></span>
            {{ww.name}}
          </div>
        </div>
      </div>
      <!-- 婚纱旅行摄影 -->
      <div class="hs">
        <div class="rd">
          <div class="my" v-for="xx in hls">
            <span></span>
            {{xx.name}}
          </div>
        </div>
        <!-- 人物动画搞笑 -->
        <div class="rd">
          <div class="my" v-for="rr in rdg">
            <span style="background-color:#72d8c4"></span>
            {{rr.name}}
          </div>
        </div>
       
      </div>
       </router-link>
    </div>
  </div>
</template>

<script>
import Headers from '../components/Headers.vue'
export default {
  components: {
    Headers
  },
  data: function () {
    return {
      // gengduo: [],    // 良品购和商店分类的页面
      mjy: [], // 美食家居影音
      btb: [], // 壁纸头像表情
      smf: [], // 时尚美发美容
      wsc: [], // 文字手工插画
      hls: [], // 婚纱旅行摄影
      rdg: [], // 人物动画搞笑
    }
  },
  mounted: function () {
    this.requestGeng()
  },
  // 用于书写发送请求
  methods: {
    // 更多请求
    requestGeng() {
      this.$http.get('dt/napi/index/groups/?', {
        params: {
          app_version: 14,
          app_code: 'mdt'
        }
      })
        .then(function (res) {
          // this.gengduo = res.data.data[0].group_items
          // console.dir(this.gengduo)
          this.mjy = res.data.data[1].group_items
          console.dir(this.mjy)
          this.btb = res.data.data[2].group_items
          this.smf = res.data.data[3].group_items
          this.wsc = res.data.data[4].group_items
          this.hls = res.data.data[5].group_items
          this.rdg = res.data.data[6].group_items
        }.bind(this))
    }
  }
}
</script>

<style scoped>
.jiaju{
    text-decoration: none;
    color: #4C4C4C;
}
.m-box{
        font-size: 16px;
}
.ll {
  display: flex;
  border-bottom: 1px solid #E0E0E0;
}

.ll-box {
  margin-top: 5px;
  width: 50%;
  height: 70px;
  line-height: 90px;
  border-left: 1px solid #E0E0E0;
}

.ll-box img {
  width: 30px;
  height: 30px;
  margin-left: 20px;
}

.ll-box h4 {
  display: inline-block;
  margin-left: 20px;
  position: absolute;
  top: 35px;
  color: black;
  font-weight: 100;
}

/* 美食-壁纸 */
.mb-box {
  display: flex;
  border-bottom: 1px solid #E0E0E0;
}
.mb{
  width: 50%;
  box-sizing: border-box;
  padding: 20px 20px;
  border-left: 1px solid #E0E0E0;
}
.my{
  margin:15px;
}
.mb span{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: #83c0ae;
  margin: 5px;
}


/* 时尚-文字 */
.wh {
  display: flex;
  border-bottom: 1px solid #E0E0E0;
}

.sm {
  width: 50%;
  box-sizing: border-box;
  padding: 20px 20px;
  border-left: 1px solid #E0E0E0;
}
.sm span{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: #c49ad5;
  margin: 5px;
}

/* 婚纱-人物 */
.hs {
  display: flex;
  border-bottom: 1px solid #E0E0E0;
}

.rd {
  width: 50%;
  box-sizing: border-box;
  padding: 20px 20px;
  border-left: 1px solid #E0E0E0;
}
.rd span{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color:#f8dd66;
  margin: 5px;
}

</style>


